<!DOCTYPE html>
<html lang="en">
    <head>
        <title>HTML5古典卡带播放器在线演示</title>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
        <meta name="description" content="Old School Cassette Player with HTML5 Audio: Vintage format meets modern web tech: an HTML5 audio player with realistic controls" />
        <meta name="keywords" content="cassette, html5, audio, player, css3, buttons, sounds, vintage, old school, javascript, jquery" />
        <meta name="author" content="Codrops" />
        <link rel="shortcut icon" href="../favicon.ico"> 
        <link rel="stylesheet" type="text/css" href="css/demo.css" />
        <link rel="stylesheet" type="text/css" href="css/style.css" />
		<link rel="stylesheet" type="text/css" href="css/knobKnob.css" />
        <link href='http://fonts.googleapis.com/css?family=Aldrich' rel='stylesheet' type='text/css' />
		<script type="text/javascript" src="js/modernizr.custom.69142.js"></script> 
    </head>
    <body>
    <div id="adsense2" style="width:730px;margin:10px auto">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-0107013120141921";
/* demo页面横幅广告 */
google_ad_slot = "4192399144";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
        <div class="container">
		
			
			<header>

				<div class="support-note"><!-- let's check browser support with modernizr -->
					<span class="no-cssanimations">CSS animations are not supported in your browser</span>
					<span class="no-csstransforms">CSS transforms are not supported in your browser</span>
					<span class="no-csstransforms3d">CSS 3D transforms are not supported in your browser</span>
					<span class="no-csstransitions">CSS transitions are not supported in your browser</span>
					<span class="note-ie">Sorry, only modern browsers.</span>
				</div>
				
			</header>

			<div id="vc-container" class="vc-container">
				<div class="vc-tape-wrapper">
					<div class="vc-tape">
						<div class="vc-tape-back">
							<div class="vc-tape-wheel vc-tape-wheel-left"><div></div></div>
							<div class="vc-tape-wheel vc-tape-wheel-right"><div></div></div>
						</div>
						<div class="vc-tape-front vc-tape-side-a">
							<span>A</span>
						</div>
						<div class="vc-tape-front vc-tape-side-b">
							<span>B</span>
						</div>
					</div>
				</div>
				<div class="vc-loader"></div>
			</div><!-- //vc-container -->

		</div><!-- //container -->
		<div id="adsense" style="width:730px;margin:10px auto">
<script type="text/javascript">    /*demo页面横幅*/var cpro_id = 'u956777';</script><script src="http://cpro.baidu.com/cpro/ui/c.js" type="text/javascript"></script>
</div>
<div style="width:700px;margin:10px auto 20px auto;padding:0 0 0 180px;overflow:hidden">
		<iframe src="http://demo.itivy.com/include/follow.html" frameborder="0" scrolling="auto"  marginwidth="0" marginheight="0" allowtransparency="true" width="645px" height="35px"></iframe>
<!-- Baidu Button BEGIN -->
    <div id="bdshare" class="bdshare_t bds_tools_32 get-codes-bdshare" style="margin:10px 0 0 -4px">
        <a class="bds_tsina"></a>
        <a class="bds_tqq"></a>
        <a class="bds_renren"></a>
        <a class="bds_qzone"></a>
        <a class="bds_douban"></a>
        <a class="bds_xg"></a>
        <span class="bds_more">更多</span>
		<a class="shareCount"></a>
    </div>
<script type="text/javascript" id="bdshare_js" data="type=tools" ></script>
<script type="text/javascript" id="bdshell_js"></script>
<script type="text/javascript">
    document.getElementById("bdshell_js").src = "http://bdimg.share.baidu.com/static/js/shell_v2.js?cdnversion=" + new Date().getHours
();
</script>
<!-- Baidu Button END -->
</div>
				


<div style="display: none">
    <script language="javascript" type="text/javascript" src="http://js.users.51.la/4473358.js"></script>
    <script type="text/javascript">
        var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
        document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3Fadd0db9dee36c7a9b64141788e26de72' type='text/javascript'%3E%3C/script%3E"));

</script>

    <script type="text/javascript">

        var _gaq = _gaq || [];
        _gaq.push(['_setAccount', 'UA-21395429-1']);
        _gaq.push(['_trackPageview']);

        (function() {
            var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
            ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
            var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
        })();

</script>
    </div>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
		<!-- KnobKnob by Martin Angelov : https://github.com/martinaglv/KnobKnob -->
		<script src="js/transform.js"></script>
		<script src="js/knobKnob.jquery.js"></script>

		<script type="text/javascript" src="js/jquery.cassette.js"></script>
		<script type="text/javascript">	
			$(function() {
				
				$( '#vc-container' ).cassette();
						
				});
		</script>
    </body>
</html>